<div class='subtitle'>
  <span class='table-title'>统计图表</span>
  <span class='table-add'> 
          </span>
  <em class='sub-hr'></em>
</div>
<!-- 条形图 -->
<div class='charts-line'>
  <div class='searchOption'>
   <span class='title'>违法案件查处走势</span> 
   <nz-year-picker  style="margin:0 10px;" nzPlaceHolder='请选择' nzFormat='yyyy-MM-dd'></nz-year-picker> 
   <nz-select style="width: 180px;margin:0 10px;"  [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
      <nz-option nzValue="0" nzLabel="呼和浩特市市场监督管理局" ></nz-option>
  </nz-select>
  <nz-select style="width: 120px;margin:0 10px;"  [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
      <nz-option nzValue="0" nzLabel="全部企业类型" ></nz-option>
      <nz-option nzValue="1" nzLabel="药品" ></nz-option>
      <nz-option nzValue="2" nzLabel="医疗器械" ></nz-option>
      <nz-option nzValue="3" nzLabel="化妆品" ></nz-option>
      <nz-option nzValue="4" nzLabel="保健食品" ></nz-option>
      <nz-option nzValue="5" nzLabel="食品生产" ></nz-option>
      <nz-option nzValue="6" nzLabel="食品经营" ></nz-option>
  </nz-select>
  </div>
  <div echarts  style='height:239px' [options]="lineOptions" theme="macarons" class="chart"></div>
</div>   

<div class='charts-container'>
  <!-- 柱状图 -->
  <div class='bar_graph'> 
      <div class='searchOption'>
          <span class='title'>区县季度违法案件统计</span> 
          <nz-year-picker  style="margin:0 10px;" nzPlaceHolder='请选择' nzFormat='yyyy-MM-dd'></nz-year-picker> 
          <nz-select style="width: 180px;margin:0 10px;"  [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
              <nz-option nzValue="0" nzLabel="第一季度" ></nz-option>
              <nz-option nzValue="1" nzLabel="第二季度" ></nz-option>
              <nz-option nzValue="2" nzLabel="第三季度" ></nz-option>
              <nz-option nzValue="3" nzLabel="第四季度" ></nz-option>
          </nz-select>
      </div>
      <div echarts  style='height:235px' [options]="graphOptions" theme="macarons" class="chart"></div>
  </div>
  <!-- 饼图 -->
  <div class='pie'>
      <div class='searchOption'>  
          <span class='title'>案件违法主体构成</span> 
          <nz-select style="width: 120px;margin:0 10px;"  [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
              <nz-option nzValue="0" nzLabel="全部企业类型" ></nz-option>
              <nz-option nzValue="1" nzLabel="药品" ></nz-option>
              <nz-option nzValue="2" nzLabel="医疗器械" ></nz-option>
              <nz-option nzValue="3" nzLabel="化妆品" ></nz-option>
              <nz-option nzValue="4" nzLabel="保健食品" ></nz-option>
              <nz-option nzValue="5" nzLabel="食品生产" ></nz-option>
              <nz-option nzValue="6" nzLabel="食品经营" ></nz-option>
          </nz-select>
          <nz-select style="width: 120px;margin:0 10px;"  [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
              <nz-option nzValue="0" nzLabel="呼和浩特市市场监督管理局" ></nz-option>
          </nz-select> 
      </div>
      <div echarts  style='height:230px;' [options]="pieOptions" theme="macarons" class="chart"></div>
  </div>
</div> 

 
<ng-template #icon>
    <i nz-icon nzType="caret-down" nzTheme="outline"></i>
</ng-template>